@import "common.styl"

div, textarea, input, span {
  box-sizing: border-box;
}
input:-webkit-autofill,select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white  inset !important;
}


input {
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  border: none;
  border-style: none;
  text-shadow: none;
  -webkit-appearance: none;
  -webkit-user-select: text;
  outline-color: transparent;
  box-shadow: none;
}
.wrap {
  display: flex;
  flex-direction: column;
}
.void{
  height 50px
}
.bottom {
  display: flex;
  flex-direction: row;
  background-color: white;
  width: 100%;
  align-items: center;
  height: px2rem(50px);
  position: fixed;
  left: 0;
  bottom: 0;
  padding:px2rem(5px) px2rem(10px)
  z-index 99
}
.bottom input {
  border-radius: px2rem(5px);
  border: 1px solid gainsboro;
  padding: px2rem(5px);
  min-height: px2rem(25px);
  background-color: #efefef;
  font-size:px2rem(12px)
}

.bottom .msg_send {
  padding: 0 0 0 px2rem(10px);
}
.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}



/*  */

.chat-content {
  -webkit-overflow-scrolling: touch;
}

.chat-content-list {
  display: flex;
  align-items: flex-start;
  margin-bottom: px2rem(15px);
  padding: px2rem(14px) px2rem(14px);
}

.chat-content-list.right {
  flex-direction: row-reverse;
}

.chat-content-list.right > .chat-content-list-avatar {
  margin-right: 0;
  margin-left: px2rem(7px);
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-name {
  margin-right: px2rem(8px);
  text-align: right;
}

.chat-content-list.right > .chat-content-list-content .chat-content-list-msg {
  margin-left: 0;
  margin-right: px2rem(7px);
  background: #7acb79;
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-msg > .chat-content-list-msg-white,
.chat-content-list.right > .chat-content-list-content > .chat-content-list-voice > .chat-content-list-msg-white {
  border-width: 5px 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.3); /*透明 灰 透明 透明 */
  left: initial;
  right: -11px;
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-msg > .chat-content-list-msg-white.active,
.chat-content-list.right > .chat-content-list-content > .chat-content-list-voice > .chat-content-list-msg-white.active {
  right: -8px;
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-msg > .chat-content-list-msg-gray {
  border-width: 4px 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent transparent #7acb79;
  left: initial;
  right: -8px;
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-msg > .chat-content-list-msg-gray.active,
.chat-content-list.right > .chat-content-list-content > .chat-content-list-voice > .chat-content-list-msg-gray.active {
  right: -6px;
}

.chat-content-list.right > .chat-content-list-content > .chat-content-list-voice > .chat-content-list-msg-gray {
  border-width: 4px 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  left: initial;
  right: -8px;
}

.chat-content-list-voice {
  padding: px2rem(3px) px2rem(5px);
  border-radius: 5px;
  background-color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  font-family: MicrosoftYaHei;
  font-size: px2rem(12px);
  color: #332300;
  position: relative;
  margin-right: px2rem(12px);
  width: px2rem(80px);
  line-height: px2rem(14px);
  text-align: center;
  height: px2rem(30px);
  margin-top: px2rem(5px);
  margin-bottom: px2rem(5px);
}

.chat-content-list-avatar {
  width: px2rem(36px);
  height: px2rem(36px);
  margin-right: px2rem(7px);
  border:1px solid #eee
}
.chat-content-list-avatar img{
  width:100%;
  height:100%
}

.chat-content-list-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-content-list-content .chat-content-list-msg span{
  font-size:px2rem(12px)
}
.chat-content-list.right .chat-content-list-content {
  align-items: flex-end;
}

.chat-content-list-msg.yellow {
  background: #ffdb0e;
}

.chat-content-list-name {
  margin-left: px2rem(8px);
  font-family: MicrosoftYaHei;
  font-size: px2rem(12px);
  color: #332300;
  margin-bottom: px2rem(3px);
}

.chat-content-list-msg {
  padding: px2rem(8px) px2rem(10px);
  border-radius: 5px;
  background-color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  font-family: MicrosoftYaHei;
  font-size: px2rem(14px);
  color: #332300;
  position: relative;
  margin-left: px2rem(7px);
  max-width: px2rem(270px);
  word-wrap: break-word;
}

.chat-content-list-msg-white.active {
  left: -5px;
}

.chat-content-list-msg-white {
  width: 0;
  height: 0;
  position: absolute;
  font-size: 0;
  overflow: hidden;
  border-width: 5px 5px 5px 0;
  border-style: dashed solid dashed dashed;
  border-color: transparent rgba(0, 0, 0, 0.2) transparent transparent; /*透明 灰 透明 透明 */
  left: -5px;
  top: px2rem(18px);
  transform: translateY(-50%);
}

.chat-content-list-msg-gray.yellow {
  border-color: transparent #ffdb0e transparent transparent;
}

.chat-content-list-msg-gray.active {
  left: -3px;
}

.chat-content-list-msg-gray {
  width: 0;
  height: 0;
  position: absolute;
  font-size: 0;
  overflow: hidden;
  border-width: 5px 5px 5px 0;
  border-style: dashed solid dashed dashed;
  border-color: transparent #fff transparent transparent; /*透明 黄 透明 透明 */
  left: -4px;
  top: px2rem(18px);
  transform: translateY(-50%);
  z-index: 1;
}

.chat-set {
  width: px2rem(375px);
  height: px2rem(49px);
  background-color: #f7f7fa;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 px2rem(12px);
  position: relative;
}

.chat-set-icon {
  width: px2rem(30px);
  height: px2rem(30px);
}

.chat-set-icon-right {
  margin-left: px2rem(12px);
}

.chat-set-input {
  width: px2rem(265px);
  height: px2rem(36px);
  border-radius: px2rem(5px);
  background-color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  margin-left: px2rem(12px);
  padding: px2rem(5px);
  font-size: px2rem(12px);
  line-height: px2rem(16px);
}

.chat-set-voice {
  width: px2rem(265px);
  height: px2rem(36px);
  border-radius: px2rem(5px);
  border: solid 1px rgba(0, 0, 0, 0.2);
  line-height: px2rem(36px);
  font-size: px2rem(12px);
  color: #333;
  text-align: center;
  margin-left: px2rem(5px);
}

.chat-set-write {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.chat-emoji {
  position: absolute;
  width: px2rem(375px);
  bottom: px2rem(49px);
  left: 0;
}

.chat-emoji-list {
  display: inline-flex;
  flex-flow: wrap;
}

.chat-emoji-icon {
  width: px2rem(23px);
  height: px2rem(23px);
  padding: px2rem(5px);
  border-radius: px2rem(3px);
}

.chat-speaking {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: rgba(2, 2, 2, 0.6);
  z-index: 1000;
  width: px2rem(150px);
  height: px2rem(150px);
  border-radius: px2rem(5px);
}

.speaker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: px2rem(60px);
  height: px2rem(60px);
}

.chat-content-list-img {
  width: px2rem(200px);
  height: px2rem(200px);
  position: relative;
}

.chat-content-list-img image {
  width: 100%;
  height: 100%;
}

.chat-content-list-time {
  display: block;
  text-align: center;
  width: 100%;
  height: px2rem(20px);
  font-size: px2rem(10px);
  color: #999;
  float: left;
  margin-top: px2rem(10px);
}

.chat-content-list.right .chat-content-list-msg-del {
  position: absolute;
  left: -5px;
  top: -9px;
  font-size: px2rem(7px);
  width: px2rem(10px);
  height: px2rem(10px);
}

.chat-content-list .chat-content-list-msg-del {
  position: absolute;
  right: -5px;
  top: -9px;
  font-size: px2rem(7px);
  width: px2rem(10px);
  height: px2rem(10px);
}
